<template>
	<view class="content poRel">
		<view class="wid100 bacFFF" style="height: 96rpx;">
			<view class="wid90 hei100 mar dis disJuB">
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;"
					:style="xuan == 0?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'"
					@click="xuan_change(0)">
					全部</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;"
					:style="xuan == 1?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'"
					@click="xuan_change(1)">
					待接单</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;"
					:style="xuan == 2?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'"
					@click="xuan_change(2)">
					待服务</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;"
					:style="xuan == 3?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'"
					@click="xuan_change(3)">
					服务中</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 92rpx;"
					:style="xuan == 4?'border-bottom: 4rpx solid '+theme.main_color+';color: '+theme.main_color+';':'border-bottom: 4rpx solid #fff;color: #585858;'"
					@click="xuan_change(4)">
					已完成</view>
			</view>
		</view>
		<scroll-view style="height: calc(100vh - 96rpx);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<view style="height: 1rpx;"></view>
			<wsj v-if="list.length == 0" zs='0'></wsj>
			<block v-for="(item,index) in list" :key="index">
				<view class="mar-top20 wid90 mar bacFFF borRad20"
					@click="tiaozhuan('/pages/indent/particulars?id='+item.id)">
					<view class="wid90 mar">
						<view class="hei80 dis disAl disJuB">
							<view class="foSi20" style="color: #5B5B5B;">订单号：{{item.order_id}}</view>
							<view class="foSi25 fowe800">
								<span style="color: red;" v-if="item.service_status == -3">退款售后</span>
								<span style="color: red;" v-if="item.service_status == -2">订单已取消</span>
								<span style="color: red;" v-if="item.service_status == -1">已拒单(待转单)</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 0">待接单</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 1">已接单</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 2">已出发</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 3">已到达</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 4">开始服务</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 5">已完成</span>
								<span :style="'color: '+theme.main_color+';'" v-if="item.service_status == 6">已完成</span>
								
								<!-- <span v-if="" style="color: #00AD27;"></span>
								<span v-if="" style="color: #FF0000;"></span>
								<span v-if=""></span> -->
							</view>
						</view>
						<view class="xia"></view>
						<view class="dis disAl wid100 mar-top30">
							<view class="wid25" style="height: 142rpx;">
								<image :src="item.cover_img" class="hei100 borRad10" style="width: 142rpx;"></image>
							</view>
							<view style="width: 75%;">
								<view class="dis disAl disJuB">
									<view class="foSi30 fowe800" style="line-height: 40rpx;">{{item.service.name}}
									</view>
									<view class="foSi25">×1</view>
								</view>
								<view class="foSi20" style="color: #878787;">
									<view class=" mar-top10">服务技师：{{item.tech_name}}</view>
									<view class=" mar-top10">预约时间：{{item.start_time}}-{{item.end_time}}</view>
									<view class=" mar-top10">
										<span>总计：</span>
										<span class="foSi25" style="color: #FF0000;">¥{{item.total_price}}</span>
									</view>
								</view>
							</view>
						</view>
						<view class="mar-top20 dis foSi20 wid100" style="justify-content: flex-end;">
							<view class="dis disAl disJuC mar-right20 butt1" v-if="item.service_status == 0" @click="service_status_change(-1,index)">拒绝接单</view>
							<!-- <view class="dis disAl disJuC mar-right20 butt1">联系客户</view> -->
							<view class="dis disAl disJuC mar-right20 butt1" v-if="item.service_status >= 5 && item.is_shieid == 0" @click.stop="pingbi(index)">屏蔽Ta</view>
							<view class="dis disAl disJuC coFFF butt2" v-if="item.service_status == 0" @click.stop="service_status_change(1,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">确认接单</view>
							<view class="dis disAl disJuC coFFF butt2" v-if="item.service_status == 1"@click.stop="service_status_change(2,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">已出发</view>
							<view class="dis disAl disJuC coFFF butt2" v-if="item.service_status == 2" @click.stop="service_status_change(3,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">拍照确认到达</view>
							<view class="dis disAl disJuC coFFF butt2" v-if="item.service_status == 3" @click.stop="service_status_change(4,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">开始服务</view>
							<view class="dis disAl disJuC coFFF butt2" v-if="item.service_status == 4" @click.stop="service_status_change(5,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">拍照完成服务</view>
							<view class="dis disAl disJuC coFFF butt2" v-if="item.service_status == 5" @click.stop="service_status_change(6,index)"
								:style="'background-color: '+theme.main_color+';border: 1rpx solid '+theme.main_color+';'">评价客户</view>
						</view>
						<view style="height: 30rpx;"></view>
					</view>
				</view>
			</block>
			<view style="height: 50rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import wsj from '../../common/w_sj.vue'
	export default {
		components: {
			wsj
		},
		data() {
			return {
				url: this.global.url,
				xuan: 0,
				last_page: 0,
				page: 1,
				list: [],
				arrive_img: '', // 技师到达拍照
				end_service_img:'', // 技师服务结束拍照
				lon:'', // 经度
				lat:'', // 纬度
				theme: null
			}
		},
		onLoad() {
			this.theme = uni.getStorageSync('theme')
		},
		onShow() {
			this.list = []
			this.getList()
		},
		methods: {
			lower(e) {
				if (this.last_page > this.page) {
					this.page++
					this.getList()
				}
			},
			getList() {
				var that = this
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/tech/tech_order_list',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('token')
					},
					data: {
						tech_id: uni.getStorageSync('tech_id'),
						page: that.page,
						service_status: that.xuan
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.list = that.list.concat(result.data.data)
							that.last_page = result.data.last_page
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			// 屏蔽技师
			pingbi(index){
				let that = this
				uni.showModal({
				    title: '提示',
				    confirmText:'确认', //确定按钮的文字，默认为"确定"
				    cancelText:'取消',//取消按钮的文字，默认为"取消"
				    content: '确认屏蔽该用户吗？屏蔽后该用户将无法再次向您下单！',
				    showCancel:true,//是否显示取消按钮，默认为 true
				    cancelColor:'#eeeeee',//取消按钮的文字颜色，默认为"#000000"
				    confirmColor:'#007aff',//确定按钮的文字颜色
				    editable:false,//是否显示输入框
					success: function (res) {
					    if (res.confirm) {
							console.log('请求屏蔽用户')
							uni.showLoading({
								title: '加载中'
							})
							uni.request({
								url: that.global.url + 'api/qianyu_smfw/tech/tech_evaluate',
								method: 'POST',
								header: {
									'site-id': that.global.site_id,
									'token': uni.getStorageSync('token')
								},
								data: {
									tech_id:uni.getStorageSync('tech_id'),
									orderid: that.list[index]['id'],
								},
								success(res) {
									let result = res.data
									console.log(result)
									if (result.code == 1) {
										uni.showToast({
											title: '已为您屏蔽该用户',
											icon: 'none',
											duration: 2000
										})
										that.list[index]['is_shieid'] = 1;
									} else {
										uni.showToast({
											title: result.msg,
											icon: 'none',
											duration: 2000
										})
									}
								},
								complete() {
									uni.hideLoading()
								}
							})
						}
					}
				});
			},
			service_status_change(index, ind) {
				var that = this
				// 重新定位
				uni.getLocation({
					type: 'wgs84',
					success: async (res) => {
						uni.setStorageSync('js_lon', res.latitude);
						uni.setStorageSync('js_lat', res.longitude);
						// that.up_address() // 更新技师位置
					}
				});
				if (index == 3) {
					
					// 拍照到达
					if (that.arrive_img == '') {
						that.uploadimg(3,ind)
						return false;
					}
				}
				if(index == 5){
					// 技师服务完成拍照
					if (that.end_service_img == '') {
						that.uploadimg(5,ind)
						return false;
					}
				}
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/tech/tech_order_change',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('token')
					},
					data: {
						tech_id: uni.getStorageSync('tech_id'),
						orderid: that.list[ind]['id'],
						service_status: index,
						arrive_img:that.arrive_img,
						end_service_img:that.end_service_img,
						lon:uni.getStorageSync('js_lon'),
						lat:uni.getStorageSync('js_lat'),
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.list[ind]['service_status'] = result.data
							
							// 更新默认数据
							if(index == 3){
								that.arrive_img = ''
							}
							if(index == 5){
								that.end_service_img = ''
							}
							// that.getList()
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},

			uploadimg(type,index) {
				let that = this
				// 项目实战中使用
				uni.chooseImage({
					count: 1, // 图片数量
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						
						uni.uploadFile({
							url: that.global.url + 'api/qianyu_smfw/common/file_upload', //上传图片api
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'site-id': that.global.site_id,
								'token': uni.getStorageSync('token')
							},
							success: (res) => {
								let result = JSON.parse(res.data)
								console.log(result)
								if(result.code == 1){
									uni.showToast({
										title: "上传成功",
										icon: "success"
									})
									if(type == 3){
										that.arrive_img = result.data
									}
									if(type == 5){
										that.end_service_img = result.data
									}
									
									console.log('设置的内容',that.arrive_img)
									that.service_status_change(type,index)
								}else{
									uni.showToast({
										title: result.msg,
										icon: "success"
									})
								}
								
							}
						});
					}
				});
			},


			xuan_change(index) {
				this.xuan = index
				this.page = 1
				this.list = []
				this.getList()
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}

	.xia {
		height: 1rpx;
		background-color: #E5E5E5;
	}

	.butt1 {
		width: 120rpx;
		height: 42rpx;
		color: #8A8A8A;
		border: 1rpx solid #8A8A8A;
		border-radius: 8rpx;
	}

	.butt2 {
		width: 120rpx;
		height: 42rpx;
		border-radius: 8rpx;
	}
</style>